<template>
  <div class="depPieCharts">
    <div ref="depPieCharts" class="charts"></div>
  </div>
</template>

<script>
export default {
  props:{
    title:{
      type:String
    },
    type:{
      type:Boolean
    }
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    console.log(this.title)
    // this.initPieCharts();
  },
  methods: {
    initPieCharts() {
      let colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
      this.chart = this.$echarts.init(this.$refs.depPieCharts);
      let option = {
        title: {
          text: this.title.length>4?this.title.substr(0,4)+'\n'+this.title.substr(4):this.title,
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend:{
          left:"left",
          icon:"circle",
          show:this.type
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "55%"],
            clockwise: true,
            avoidLabelOverlap: false,
            hoverOffset: 11, //鼠标放入的显示比例
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "outside",
              padding: [-20, -40, 0, -20],
              formatter: "{d}人",
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              {
                name: "正常出勤",
                value: 1.45,
              },
              {
                name: "请假人员",
                value: 2.93,
              },
              {
                name: "迟到人次",
                value: 3.15,
              },
              {
                name: "早退人次",
                value: 4.78,
              },
              {
                name: "漏签人次",
                value: 5.93,
              },
              {
                name: "旷工人次",
                value: 5.73,
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>